import type { GraphModel, NodeConfig } from '@logicflow/core'
import { RectNode, RectNodeModel, h } from '@logicflow/core'
import { getBpmnId } from '@logicflow/extension/es/bpmn/getBpmnId'

class UserTaskModel extends RectNodeModel {
  static extendKey = 'UserTaskModel'
  constructor(data: NodeConfig, graphModel: GraphModel) {
    if (!data.id)
      data.id = `Activity_${getBpmnId()}`

    super(data, graphModel)
  }
}

class UserTaskView extends RectNode {
  static extendKey = 'UserTaskNode'
  getLabelShape(): any {
    const { model } = this.props
    const { x, y, width, height } = model
    const style = model.getNodeStyle()
    return h(
      'svg',
      {
        x: x - width / 2 + 2,
        y: y - height / 2 + 2,
        width: 28,
        height: 28,
        viewBox: '0 0 1024 1024',
      },
      h('path', {
        fill: style.stroke,
        d:
          'M507.776 186.88c-90.765824 0-155.697664 69.77536-155.879936 149.255168v0.045056c0.005632 24.035328 6.509568 49.40288 16.67072 72.282624 7.33696 16.520704 16.459264 31.709184 27.575296 43.876352-66.06336 22.601216-143.458816 59.79904-182.578176 133.147648L211.456 589.44V826.88h592.64v-237.44l-2.107904-3.95264c-38.556672-72.2944-114.277888-109.44-179.70176-132.135424 31.938048-32.477696 41.35936-74.396672 41.3696-117.171712v-0.045056C663.473664 256.65536 598.541824 186.88 507.776 186.88zM445.803008 271.513088c4.195328 0.01024 8.801792 0.150528 13.88032 0.450048 40.459264 2.384384 54.076416 9.667584 64.543744 16.574976 10.466816 6.90688 17.84576 13.482496 45.508096 14.288896h0.017408c21.555712-0.8064 31.922688-4.649472 39.356928-9.003008 3.012608-1.76384 5.541888-3.597824 8.134144-5.348864 6.85056 14.685184 10.530304 30.919168 10.571776 47.719936-0.014336 47.84128-8.239104 81.344512-52.105216 108.761088l4.291072 32.34304c9.130496 2.77248 18.568192 5.814784 28.1472 9.150976 1.337856 5.5808 2.883584 12.900352 3.922944 20.681728 1.089024 8.152576 1.517568 16.634368 0.845824 23.003136-0.671232 6.368768-2.648576 9.806848-2.995712 10.153984-22.296064 22.296064-61.873664 35.298816-102.017024 35.298816-40.143872 0-79.72096-13.002752-102.017024-35.298816-0.347136-0.347136-2.32448-3.785216-2.996224-10.153984-0.671232-6.368768-0.2432-14.85056 0.846336-23.003136 1.044992-7.824384 2.603008-15.186944 3.945984-20.779008 9.483264-3.29728 18.82624-6.30784 27.86816-9.053696l2.55744-34.656256c-2.082816-2.671104-4.205056-4.440576-6.73792-6.34112-9.789952-7.34464-21.66272-23.502336-30.04928-42.38592-8.382976-18.876416-13.576704-40.45312-13.584384-57.724928 0.051712-20.707328 5.62432-40.556032 15.859712-57.700864 1.831424-0.681984 3.762688-1.402368 5.933056-2.116096 7.632896-2.510336 18.092544-4.906496 36.273152-4.860928zM368.312832 501.68576c-0.032256 0.23552-0.068096 0.464384-0.09984 0.700416-1.324544 9.913856-2.102784 20.70528-0.964096 31.506944 1.138688 10.801152 3.98848 22.43072 13.296128 31.737856 31.768576 31.768576 79.8464 45.796864 127.358976 45.796864 47.512064 0 95.5904-14.0288 127.358976-45.796864 9.307136-9.307136 12.15744-20.936704 13.296128-31.737856 1.138688-10.801664 0.360448-21.593088-0.964096-31.506944-0.026112-0.195584-0.05632-0.385536-0.082944-0.580096 48.299008 21.180928 94.98368 51.51488 120.743936 96.805888V791.04H682.496v-135.68h-35.84v135.68H368.128v-135.68h-35.84v135.68H247.296v-192.428032c25.808896-45.376512 72.621056-75.74016 121.016832-96.926208z',
      }),
    )
  }

  getShape(): any {
    const { model } = this.props
    const { x, y, width, height, radius } = model
    const style = model.getNodeStyle()
    // TODO: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
    return h('g', {}, [
      h('rect', {
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height,
        ...style,
      }),
      this.getLabelShape(),
    ])
  }
}

const UserTask = {
  type: 'bpmn:userTask',
  view: UserTaskView,
  model: UserTaskModel,
}

export { UserTaskView, UserTaskModel }
export default UserTask
